<template>
	<div class="doingsCard_box" @click="jump">
		<div class="header_box">
			<div class="title_box">
				<span>{{ cardData.activityName}}</span>
			</div>
			<div :class="this.doingState == '已结束'?['state_box','end_state']:['state_box']">
				<span>{{ doingState }}</span>
			</div>
		</div>
		<div class="line_box">

		</div>
		<div class="info_box">
			<span>发起人：{{ cardData.publisher }}</span>
			<span>活动类型：{{ cardData.activityTypeName}}</span>
			<span>电话：{{ cardData.activityPhone }}</span>
			<span>时间：{{ cardData.activityStartTime.substr(0,10) }}</span>
			<span>地址：{{ cardData.activityAddress }}</span>
		</div>
	</div>
</template>

<script>
	import {
		alreadyEndedPage,
		eventDetailsPage
	} from "@/util/publicConfig";
	import {
		baseMixins
	} from "@/util/baseMixins";

	export default {
		mixins: [baseMixins],
		name: "index",
		doingState: "进行中",
		props: ['cardData'],
		data() {
			return {
				doingState: "进行中",
				eventDetailsPage,
			}
		},
		watch: {
			cardData: {
				handler(newVal, oldVal) {
					let nowTime = Date.now();
					let endTime = Date.parse(newVal.activityEndTime);
					if (nowTime > endTime) {
						this.doingState = "已结束"
					}

				},
				deep: true, // 开启深度监视
				immediate: true
			}
		},
		methods: {
			jump() {
				if (this.doingState == "进行中") {
					this.goSubPage(`${eventDetailsPage}?id=${this.cardData.id}`)
				} else if (this.doingState == "已结束") {
					this.goSubPage(`${alreadyEndedPage}?id=${this.cardData.id}`)

				}

			}
		}



	}
</script>

<style scoped lang="scss">
	.doingsCard_box {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding-left: 31rpx;
		padding-right: 31rpx;

		.header_box {
			width: 100%;
			//background-color:yellow;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: (15rpx 5rpx 15rpx 5rpx);

			.title_box {
				width: 60%;
				font-size: 30rpx;
				color: #222222;
				font-weight: 600;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

			}

			.state_box {
				width: 146rpx;
				height: 60rpx;
				background-color: #C1E6FF;
				border-radius: 28rpx;
				color: #1174E6;
				font-size: 24rpx;
				display: flex;
				justify-content: center;
				align-items: center;


			}

			.end_state {
				background-color: #FFDFD3;
				color: #AD2325;
			}
		}

		.line_box {
			width: 100%;
			height: 3rpx;
			background-color: #C7C7C7;
		}

		.info_box {
			width: 100%;
			//background-color: pink;
			display: flex;
			flex-direction: column;
			align-items: start;
			justify-content: space-around;
			font-size: 30rpx;
			font-weight: 500;
			color: #707070;
			line-height: 1.5rem;
		}


	}
</style>